<template>
	<view class="device-overview">
		<!-- 设备信息 -->
		<view class="info-list">
			<view class="info-row">
				<view class="row-label">设备ID：</view>
				<view class="row-value">{{deviceInfo.id}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">设备名称：</view>
				<view class="row-value">{{deviceInfo.name}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">序列号：</view>
				<view class="row-value">{{deviceInfo.serialNumber}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">设备类型：</view>
				<view class="row-value" v-if="deviceInfo.deviceModelRack">{{deviceInfo.deviceModelRack.name}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">机柜位置：</view>
				<view class="row-value">第{{deviceInfo.rowIndex}}行， 第{{deviceInfo.columnIndex}}列</view>
			</view>
			<view class="info-row">
				<view class="row-label">备注：</view>
				<view class="row-value">{{deviceInfo.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const $props = defineProps({
	deviceInfo:{
		type: Object,
		default: () => {}
	}
})

</script>

<style lang="scss" scoped>
.device-overview{
	width: 100%;
	.info-list{
		width: 100%;
		.info-row{
			box-sizing: border-box;
			width: 100%;
			height: 59rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			&:nth-child(odd){
				background-color: #F9FBFD;
			}
			.row-label{
				width: 126rpx;
				font-size: 23rpx;
				color: #7E8CA0;
				margin-right: 24rpx;
			}
			.row-value{
				width: calc(100% - 160rpx);
				font-size: 23rpx;
				color: #262D37;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>